<template>

  <div v-loading="loading">
    <data-table
      ref="pagingTable"
      :options="options"
      :list-query="listQuery"
      @add="handleAdd"
    >
      <template #filter-content>
        <dic-catalog-tree v-model="listQuery.params.catId" dic-code="tmpl_catalog" class="filter-item" title="选择试卷分类" />
        <dic-list-select v-model="listQuery.params.joinType" dic-code="join_type" class="filter-item" style="width: 200px" />
        <el-input v-model="listQuery.params.title" placeholder="试卷名称" class="filter-item" style="width: 200px" size="small" />
      </template>

      <template #data-columns>

        <el-table-column
          label="试卷名称"
          prop="title"
          show-overflow-tooltip
        >

          <template v-slot="scope">
            <detail-link :id="scope.row.id" :title="scope.row.title" to="ExamTmplUpdate" permission="tmpl:update" />
          </template>

        </el-table-column>

        <el-table-column
          label="组卷方式"
          prop="joinType_dictText"
          align="center"
          width="120px"
        />

        <el-table-column
          label="试卷分类"
          show-overflow-tooltip
          prop="catId_dictText"
          align="center"
          width="180px"
        />

        <el-table-column
          label="总分"
          align="center"
          prop="totalScore"
          width="120px"
        />

        <el-table-column
          label="创建人"
          align="center"
          prop="createBy_dictText"
          width="120px"
        />

        <el-table-column
          label="创建时间"
          align="center"
          prop="createTime"
          width="180px"
        />

        <el-table-column
          label="操作"
          align="center"
          width="300px"
        >

          <template v-slot="scope">
            <div v-if="!selectMode">

              <router-link v-permission="['tmpl:preview']" :to="{ name: 'ExamTmplPreview', params: { id: scope.row.id }}" style="margin-left: 10px">
                <el-link type="primary" icon="el-icon-view">预览</el-link>
              </router-link>

              <el-link v-permission="['tmpl:copy']" type="primary" style="margin-left: 10px" icon="el-icon-document-copy" @click="handleCopy(scope.row.id)">复制</el-link>

              <router-link v-permission="['exam:add']" :to="{ name: 'AddExam', params: { tmplId: scope.row.id }}" style="margin-left: 10px">
                <el-link type="primary" icon="el-icon-magic-stick">创建考试</el-link>
              </router-link>

            </div>
            <div v-else>
              <el-button v-if="selectMode" size="mini" icon="el-icon-check" type="primary" @click="handleSelect(scope.row.id)">选定</el-button>
            </div>

          </template>

        </el-table-column>

      </template>

    </data-table>

    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="dialogVisible"
      title="创建试卷"
      width="500px"
    >
      <tmpl-pre-create @confirm="handleConfirm" />
    </el-dialog>

  </div>

</template>

<script>
import DataTable from '@/components/DataTable'
import DicCatalogTree from '@/components/DicTreeSelect'
import TmplPreCreate from '@/views/admin/tmpl/components/components/TmplPreCreate'
import DicListSelect from '@/components/DicListSelect'
import { apiCopyTmpl } from '@/api/tmpl/tmpl'
import permission from '@/directive/permission/index.js'
import DetailLink from '@/components/DetailLink' // 权限判断指令

export default {
  name: 'TmplList',
  directives: { permission },
  components: {
    DetailLink,
    DicListSelect,
    TmplPreCreate,
    DicCatalogTree, DataTable },
  props: {
    selectMode: Boolean
  },
  data() {
    return {

      loading: false,
      dialogVisible: false,

      listQuery: {
        current: 1,
        size: 10,
        params: {
          title: ''
        }
      },

      options: {
        // 可批量操作
        multi: !this.selectMode,
        add: {
          enable: !this.selectMode,
          permission: 'tmpl:add'
        },
        edit: {
          enable: true,
          permission: 'tmpl:update',
          router: { name: 'ExamTmplUpdate', params: { id: '$id' }}
        },
        delete: {
          enable: true,
          permission: 'tmpl:delete',
          url: '/api/tmpl/tmpl/delete'
        },
        // 列表请求URL
        listUrl: '/api/tmpl/tmpl/paging'
      }
    }
  },
  methods: {

    handleAdd() {
      this.dialogVisible = true
    },
    handleSelect(id) {
      this.$emit('select', id)
    },
    handleConfirm(data) {
      this.$router.push({ name: 'ExamTmplAdd', params: data })
    },
    handleUpdate(id) {
      this.$router.push({ name: 'ExamTmplUpdate', params: { id: id }})
    },

    handleCreate(id) {
      this.$router.push({ name: 'AddExam', params: { tmplId: id }})
    },

    // 预览
    handlePreview(id) {
      this.$router.push({ name: 'ExamTmplPreview', params: { id: id }})
    },

    // 复制
    handleCopy(id) {
      this.$confirm('确实要复制试卷吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        apiCopyTmpl(id).then(res => {
          this.$message.success('试卷复制成功！')
          this.loading = false
          this.$router.push({ name: 'ExamTmplUpdate', params: { id: res.data.id }})
        }).catch(() => {
          this.loading = false
        })
      })
    }
  }
}
</script>
